<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class（对象语法）</title>
  <style>
    .active {
      color: aqua;
    }

    .line {
      background-color: darkmagenta;
    }
    .title{
      font-family: 华文楷体;
    }
  </style>
</head>
<body>

<!--v-bind动态绑定class可以控制标签中的class是否生效,并且可以和普通的class同时存在，vue解析时会将两个class里的值合并-->
<div id="app">
  <!--<h2 class='title' :class="{key(class类名): value(boolean类型的值)}">{{message}}</h2>-->
  <h2 class='title' :class="{active: isActive, line: isLine}">{{message}}</h2>
  <!--还有一种使得页面简洁的写法-->
  <h2 class='title' :class="getClass()">{{message}},简洁的写法</h2>
  <button v-on:click="isClass">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue',
      isActive: true,
      isLine: true
    },
    methods: {
      // 点击按钮决定class是否生效
      isClass: function () {
        this.isActive = !this.isActive;
        this.isLine = !this.isLine;
      },
      // 简洁的写法
      getClass:function () {
        return {active: this.isActive, line: this.isLine};
      }

    }

  });
</script>
</body>
</html>
